<template lang="html">
  <div id="circle"></div>
</template>

<script>
import * as d3 from 'd3'

export default {
  methods: {
    init () {
      let arc = d3.arc()
      let myData = {
        innerRadius: 80,
        outerRadius: 100,
        startAngle: 0,
        endAngle: 2 * Math.PI
      }
      let outData = arc(myData)

      // 绘制
      let svg = d3.select('#circle')
        .append('svg')
        .attr('width', 400)
        .attr('height', 400)

      svg.append('g')
        // .attr('transform', 'translate(' + (400 / 2) + ', ' + (400 / 2) + ')')
        .attr('transform', `translate(+${400 / 2}, +${400 / 2})`)
        .append('path')
        .attr('fill', '#F5C7F7')
        .attr('d', outData)
    }
  },
  mounted () {
    this.init()
  }
}
</script>

<style lang="scss" scoped>
</style>
